<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义JS对象</title>
</head>
<body>
    <table border="1px solid red">
        <tr>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品库存</td>
        </tr>
    </table>
    <script>
        let p1 = {
            name: '李四',
            age: 18,
            eat: function (){
                console.log(this.name + '~~~~~' + this.age);
            }
        };
        console.log(p1);
        p1.eat();

        let p2 = {};
        p2.name = '张三';
        p2.age = 20;
        p2.eat = function (){
            console.log(this.name + '~~~~~' + this.age);
        };


        let productArr = [
            {title:'华为Mate60',price:8000,num:200},
            {title:'小米14',price:5000,num:1000},
            {title:'苹果15',price:8000,num:800},
            {title:'OPPO Reno11',price:8000,num:10},
        ]

        let table = document.querySelector('table');

        for (let i = 0; i < productArr.length; i++) {
            let tr = document.createElement('tr');
            let titileTd = document.createElement('td');
            titileTd.textContent = productArr[i].title;
            tr.append(titileTd)

            let priceTd = document.createElement('td');
            priceTd.textContent = productArr[i].price;
            tr.append(priceTd)

            let numTd = document.createElement('td');
            numTd.textContent = productArr[i].num;
            tr.append(numTd)
            table.appendChild(tr)
        }




    </script>
</body>
</html>